import Taro , { Component } from '@tarojs/taro'
import { View , Image , Text , Button} from '@tarojs/components'

import homeIcon from '../../image/ic_jump_home.png'
import shareIcon from '../../image/ic_share.png'
import collectIcon from '../../image/ic_star_kline_grey.png'
import collectedIcon from '../../image/ic_star_kline_red.png'

import {base_url} from "../../network/config";


import DataManager from '../../utils/DataManager.js'

import './detailToolBar.scss'


export default class detailToolBar extends Component{

  defaultProps = {
    hasCollect : false,
    itemId:Number,
    itemType:Number,
    mobileNumber:''
  }

  constructor(){
    super(...arguments)
    this.state={
      hasCollect : this.props.hasCollect,
      itemId:this.props.itemId,
      mobileNumber:''
    }
  }

  onShareAppMessage(options){
    console.log('--------options=======' + JSON.stringify(options))
  }

  componentWillReceiveProps(nextProps){

    console.log('--------nextProps=======' + JSON.stringify(nextProps))

    this.setState({
      hasCollect:nextProps.hasCollect,
      itemId:nextProps.itemId,
      mobileNumber:nextProps.mobileNumber
    })
  }

  onHomeClick = () =>{
    Taro.reLaunch({
      url:`/pages/index/index`
    })
  }

  onCollectClick = () =>{
    if (this.state.hasCollect){
      this.handleCancelCollect();
    } else {
      this.handleSaveCollect();
    }
  }

  handleSaveCollect(){

    if (!DataManager.getToken()) {
      Taro.showToast({
        title:'请先前往首页授权后再进行收藏'
      })
      return;
    }

    console.log('....save...' + this.state.itemId + '     ' + this.props.itemType)

    let _this = this;
    Taro.request({
      url:base_url + 'rest/user/collect/save',
      data:{
        token:DataManager.getToken(),
        platform:'android_c',
        weixinId:DataManager.getWeiXinId(),
        loginChannel:'wechat',
        appId:'KC876D98B30UA40CJSNHI689FB33SDW',
        digest : 'dda484557c12febe48139d8f44051c13',
        id:_this.state.itemId,
        type:_this.props.itemType
      },
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      method: 'POST',
      success(res2) {
        console.log('收藏结果==========' + JSON.stringify(res2))
        _this.setState({
          hasCollect: true
        })
      }
    })
  }

  handleCancelCollect(){

    if (!DataManager.getToken()) {
      Taro.showToast({
        title:'请先前往首页授权后再进行操作'
      })
      return;
    }
    console.log('.......' + this.state.itemId + '     ' + this.props.itemType)
    let _this = this;
    Taro.request({
      url:base_url + 'rest/user/collect/cancel',
      data:{
        token:DataManager.getToken(),
        platform:'android_c',
        weixinId:DataManager.getWeiXinId(),
        loginChannel:'wechat',
        appId:'KC876D98B30UA40CJSNHI689FB33SDW',
        digest : 'dda484557c12febe48139d8f44051c13',
        businessId:_this.state.itemId,
        businessType:_this.props.itemType
      },
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      method: 'POST',
      success(res2) {
        _this.setState({
          hasCollect: false
        })
      }
    })
  }


  onPhoneClick = () =>{
    console.log('-----number=========' + this.state.mobileNumber)
    Taro.makePhoneCall({
      phoneNumber : this.state.mobileNumber
    })
  }

  render(){
    let collImage = this.state.hasCollect ? collectedIcon : collectIcon;
    let collText = this.state.hasCollect ? '已收藏' : '收藏';
    let phoneText = this.props.itemType == 3 ? '联系商家' : '拨打电话';

    return(
      <View className='tool-bar-container'>
        <View className='tool-bar-small-sub' onClick={this.onHomeClick.bind(this)}>
          <Image className='tool-bar-small-image' src={homeIcon}/>
          <Text className='tool-bar-small-text'>首页</Text>
        </View>
        <View className='tool-bar-small-sub'>
          <Image className='tool-bar-small-image' src={shareIcon}/>
          <Text className='tool-bar-small-text'>转发</Text>
          <Button
            className='tool-bar-share-button'
            openType='share'
            style='width:20%;height:55px;position: fixed;z-index: 1000000;background-color: transparent;'
          />
        </View>
        <View className='tool-bar-small-sub'onClick={this.onCollectClick.bind(this)}>
          <Image className='tool-bar-small-image' src={collImage}/>
          <Text className='tool-bar-small-text'>{collText}</Text>
        </View>
        <View className='tool-bar-large-sub'onClick={this.onPhoneClick.bind(this)}>
          <Text className='tool-bar-large-text'>{phoneText}</Text>
        </View>
      </View>
    )
  }

}
